<template>
	<div class="mine-container">
		<myNavbar :title="title"></myNavbar>
		<div class="addressEdit-list">
			<div class="addressEdit-list-item bb">
				<text class="addressEdit-label">收货人</text>
				<input class="addressEdit-list-item-input" placeholder="收货人姓名" :value="consignee" v-model="consignee" />
			</div>
			<div class="addressEdit-list-item bb">
				<text class="addressEdit-label">手机号码</text>
				<input class="addressEdit-list-item-input" placeholder="收货人手机号码" type="tel" :value="phone"
					v-model="phone" />
			</div>
			<!-- <div class="addressEdit-list-item bb">
				        <text class="addressEdit-label">楼层数</text>
				        <text @click="selectLevel">{{level|watchType}}</text>
				</div> -->
			<div class="addressEdit-list-item bb detail" @click="toSelectArea">
				<text class="addressEdit-label">所在地区</text>
				<text :class="[building==''?'addressEdit-detail':'addressEdit-detailActive']" :value="building"
					v-model="building">{{building==""?'小区/写字楼等':building}}</text>
				<text class="title2">&#xe61f;</text>
			</div>
			<div class="addressEdit-list-item detail">
				<text class="addressEdit-label"></text>
				<!-- <text :class="[roomNumber==''?'addressEdit-textarea':'addressEdit-textareaActive']" :value="roomNumber" v-model="roomNumber">{{roomNumber==""?'请输入门牌号、小区、楼栋号、单元等':roomNumber}}</text> -->
				<textarea class="addressEdit-textarea" placeholder="楼号/单元/门牌号" :value="roomNumber"
					v-model="roomNumber"></textarea>
			</div>
		</div>
		<div class="addressEdit-list ">
			<div class="addressEdit-list-item area">
				<text class="addressEdit-list-defalut">设为默认地址</text>
				<WSwitch class="switch" v-model="isDefault"></WSwitch>
			</div>
		</div>
		<div class="btn addressEdit-list-submit botton_Bg_Color" @click="submit">
			<text class="addressEdit-list-submit-btn">确认保存</text>
		</div>
		<div class="btn addressEdit-list-submit-del" @click="del" v-if="type =='edit'"><text
				class="addressEdit-list-submit-btn">删除地址</text></div>
	</div>
</template>
<script>
	import {
		save,
		update,
		del
	} from '../../../api/address'

	import WSwitch from "../../../components/WSwitch";
	import myNavbar from "../../../components/myNavbar/myNavbar";
	const eeui = app.requireModule('eeui');
	const picker = weex.requireModule('picker')
	export default {
		name: 'address',
		components: {
			WSwitch,
			myNavbar
		},
		data() {
			return {
				title: "",
				type: "",
				isDefault: false, //是否是默认地址
				id: "",
				level: 0,
				phone: "",
				latitude: "",
				longitude: "",
				consignee: "",
				building: "",
				areaName: "",
				address: "",
				addressDetail: "",
				roomNumber: "",
				submitOff: true,
			}
		},
		filters: {
			watchType(val) {
				if (val == 0) {
					return '有电梯'
				} else if (val == 1) {
					return '1楼'
				} else if (val == 2) {
					return '2楼'
				} else if (val == 3) {
					return '3楼'
				} else if (val == 4) {
					return '4楼'
				} else if (val == 5) {
					return '5楼'
				} else if (val == 6) {
					return '6楼'
				} else if (val == 7) {
					return '7楼'
				} else if (val == 8) {
					return '8楼'
				} else if (val == 9) {
					return '9楼'
				}

			}
		},
		created() { // 在实例创建完成后被立即调用
			let _this = this
			this.initIconFont()
			let params = app.config.params
			console.info("params--" + JSON.stringify(params))
			// const eventChannel = this.getOpenerEventChannel()
			// eventChannel.on('sendAddressDetail', function (data) {
			if (params.type == "add") {
				this.type = params.type
				this.title = "添加收货地址"
			} else if (params.type == "edit") {
				this.title = "编辑收货地址"
				this.type = params.type
				this.id = params.data.id
				this.isDefault = params.data.isDefault //是否是默认地址
				this.phone = params.data.phone
				this.latitude = params.data.lat
				this.longitude = params.data.lng
				this.level = params.data.level
				this.consignee = params.data.consignee
				this.building = params.data.building
				this.areaName = params.data.areaName
				this.address = params.data.address
				this.roomNumber = params.data.roomNumber
				this.memberId = params.data.memberId

			}
			// })
		},

		mounted() {
			let _this = this
		},

		methods: {
			selectLevel() {
				var _this = this
				picker.pick({
					items: ['有楼梯', '1楼', '2楼', '3楼', '4楼', '5楼', '6楼', '7楼', '8楼', '9楼']
				}, event => {
					if (event.result === 'success') {
						_this.level = event.data
					}
				})
			},
			//跳转到区域选择页面
			toSelectArea() {
				eeui.openPage({
					pageName: "selectArea",
					url: "root://pages/member/addressEdit/selectArea.js",
					statusBarType: 'immersion',
					statusBarStyle: false
				}, (res) => {
					if (res.status == "destroy" && res.pageName == "selectArea") {
						let variable = eeui.getCaches('address')
						console.log('variable--' + JSON.stringify(variable))
						if (!this.isNull(variable)) {
							console.log('variable.location--' + variable.location)
							this.latitude = variable.location.split(",")[1]
							console.log('latitude--' + this.latitude)
							this.longitude = variable.location.split(",")[0]
							console.log('longitude--' + this.longitude)
							this.building = variable.adName + variable.address + "(" + variable.name + ")"
							console.log('building--' + this.building)
							this.areaName = variable.adName
							this.address = variable.address
							console.log('address--' + this.address)
							console.log('addressDetail--' + this.addressDetail)
							eeui.setCaches('address', "")
						}

					}
				});
			},

			//表单提交事件
			submit() {
				if (this.isNull(this.consignee)) {
					eeui.toast({
						message: '收件人姓名不能为空'
					})
				} else if (this.isNull(this.phone)) {
					eeui.toast({
						message: "收件人号码不能为空"
					});
				} else if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
					eeui.toast({
						message: "收件人号码输入有误"
					});
				} else if (this.isNull(this.building)) {
					eeui.toast({
						message: "请点选收货地址"
					});
				} else if (this.isNull(this.roomNumber)) {
					eeui.toast({
						message: "小区、门牌号信息不能为空"
					});
				} else {
					console.info("this.submitOff" + this.submitOff)
					if (this.submitOff) {
						this.submitOff = false
						let data = {}
						data.consignee = this.consignee
						data.phone = this.phone
						data.address = this.building + ' ' + this.roomNumber
						data.areaName = this.areaName
						data.level = this.level
						data.building = this.building
						data.isDefault = this.isDefault
						data.roomNumber = this.roomNumber
						data.memberId = this.memberId
						data.lat = this.latitude
						data.lng = this.longitude
						console.info("添加地址的data--" + JSON.stringify(data))
						console.info(data)

						console.info("问题是不是在这里--" + this.type)
						if (this.type == "add") {
							data = JSON.stringify(data)
							save(data).then(
								res => {
									console.info("添加地址的res--" + JSON.stringify(res))
									// console.info("这个是里面的锁this.submitOff"+this.submitOff)
									if (res.type == 'success') {
										eeui.closePage()
										this.submitOff = true


									}
								}
							).catch(error => {
								console.log(error)
								this.submitOff = true
							})
						} else if (this.type == "edit") {
							console.info("添加地址的数据data1--" + JSON.stringify(data))
							data.id = this.id
							data = JSON.stringify(data)
							console.info("添加地址的数据data--" + JSON.stringify(data))
							update(data).then(
								res => {
									console.info("修改地址的res--" + JSON.stringify(res))
									if (res.type == 'success') {
										eeui.closePage({
											pageName: "addressEdit"
										});
										this.submitOff = true

									}
								}
							).catch(error => {
								console.log(error)
								this.submitOff = true
							})
						}
					}
				}


			},

			//地址删除的事件
			del() {
				console.info(this.id)
				del(this.id).then(
					res => {
						console.log("删除地址res--" + JSON.stringify(res))
						if (res.type == 'success') {
							eeui.closePage({
								pageName: "addressEdit"
							});
						}
					}
				).catch(error => {
					console.log(error)
				})
			}
		},
	}
</script>
<style lang="css" src="../../../style/wx.css" />
<style scoped>
	.mine-container {
		flex: 1;
		background-color: rgba(248, 248, 248, 0.8);
	}

	.navbar {
		width: 750px;
		height: 100px;
		margin-bottom: 20px;
	}

	.title2 {
		color: gray;
		font-size: 36px;
		font-family: iconfont2;
		color: #cccccc;
	}

	.addressEdit-list {
		margin: 20px 20px 0;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 16px;
		padding: 0 20px;
	}

	.addressEdit-list-item {
		flex-direction: row;
		align-items: center;
		height: 102px;
		font-size: 28px;
		font-family: PingFangSC;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		display: flex;
		align-items: center;
		position: relative;
	}

	.area {
		justify-content: space-between;
	}

	.addressEdit-list-item-input {
		width: 470px;
		height: 50px;
	}

	.bb {
		border-bottom-style: solid;
		border-bottom-width: 4px;
		border-bottom-color: rgba(128, 128, 128, 0.062);
	}

	.addressEdit-list-icon {
		position: absolute;
		right: 0px;
	}

	.addressEdit-label {
		width: 152px;
		/*padding-right: 30px;*/
		font-size: 30px;
		box-sizing: border-box;
	}

	.detail {
		height: 120px;
		align-items: center;
	}

	.addressEdit-textarea,
	.addressEdit-textareaActive {
		font-size: 30px;
		flex: 1;
		line-height: 40px;
		lines: 2;
		text-overflow: ellipsis;
		font-family: PingFang SC;
		font-weight: 400;
		max-height: 80px;
	}

	.addressEdit-textareaActive {
		color: #000;
	}

	.addressEdit-detail,
	.addressEdit-detailActive {
		font-size: 30px;
		flex: 1;
		lines: 2;
		text-overflow: ellipsis;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(135, 135, 135, 0.822);
	}

	.addressEdit-detailActive {
		color: #000;
	}

	.addressEdit-list-defalut {
		font-size: 30px;
	}

	.grey {
		color: #838383;
	}

	.addressEdit-list-submit-btn {
		font-size: 32px;
		letter-spacing: 5px;
		color: white;
		font-weight: 400;
	}

	.addressEdit-list-submit {
		align-items: center;
		justify-content: center;
		margin: 20px 20px 0;
		width: 710px;
		display: block;
		height: 82px;
		/* background-color: #0ED2F7; */
		border-radius: 100px;
	}



	.addressEdit-list-submit-del {
		align-items: center;
		justify-content: center;
		margin: 20px 20px 0;
		display: block;
		width: 710px;
		height: 82px;
		background-color: rgb(200, 200, 200);
		border-radius: 100px;
		color: red;
	}



	.switch {
		width: 120px;
		height: 60px;
	}
</style>
